<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    *{
        padding: 0;
        margin: 0;
    }
    li:nth-child(2n-1):hover{
        background-color: red;
    }
    li:nth-child(2n):hover{
        background-color: #ff6700;
    }
    li{
        list-style: none;
    }

        .hovertreeulli ul{
            width: 300px;
            border: 1px solid skyblue;
            padding: 0;
        }
    .hovertreeulli li{
        margin-left: 0;
        width: 100%;
        border-bottom: 1px solid gray;
        text-align: center;
        line-height: 30px;
    }
   .before-demo ul li:before{
    content: '';
    display: inline-block;
       width: 16px;
       height: 16px;
       background-size: 16px 16px;
       background-image:url('../imgs/hua.png');
   }
</style>
<body>

<!--<div class="hovertreeulli">-->
<!--<ul>-->
<!--    <li>1</li>-->
<!--    <li>2</li>-->
<!--    <li>3</li>-->
<!--    <li>4</li>-->
<!--    <li>5</li>-->
<!--    <li>6</li>-->
<!--    <li>7</li>-->
<!--    <li>8</li>-->
<!--    <li>9</li>-->
<!--    <li>10</li>-->
<!--</ul>-->
<!--</div>-->
    <div class="before-demo">
    <ul >
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
        <li>9</li>
        <li>10</li>
    </ul>
    </div>

</body>
</html>